<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8" />
    <title>取色器</title>
    <style>
        body {
            margin: 0;
            background: #222;
        }

        #canvas {
            display: block;
            margin: 0 auto;
            cursor: crosshair;
        }

        #color-preview {
            position: fixed;
            left: 20px;
            top: 20px;
            width: 60px;
            height: 60px;
            border-radius: 8px;
            border: 2px solid #fff;
            box-shadow: 0 2px 8px #0006;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #222;
            font-weight: bold;
            font-size: 16px;
            background: #fff;
        }

        #magnifier {
            position: fixed;
            display: none;
            pointer-events: none;
            z-index: 10001;
            border: 2px solid #fff;
            border-radius: 8px;
            box-shadow: 0 2px 8px #0006;
        }
    </style>
</head>

<body>
    <canvas id="canvas"></canvas>
    <div id="color-preview" style="display:none;"></div>
    <canvas id="magnifier" width="90" height="90"></canvas>
    <script>
        const { ipcRenderer, clipboard } = window.electron || {};
        let base64 = null;
        let img = new window.Image();
        let canvas = document.getElementById('canvas');
        let ctx = canvas.getContext('2d');
        let colorPreview = document.getElementById('color-preview');
        let magnifier = document.getElementById('magnifier');
        let magnifierCtx = magnifier.getContext('2d');
        const MAG_SIZE = 9; // 9x9 区域
        const MAG_PIXEL = 32; // 每像素放大倍数
        magnifier.width = MAG_SIZE * MAG_PIXEL;
        magnifier.height = MAG_SIZE * MAG_PIXEL;

        ipcRenderer.on('eyedropper-show-image', (_e, b64) => {
            base64 = b64;
            img.src = b64;
        });
        img.onload = function () {
            canvas.width = img.width;
            canvas.height = img.height;
            ctx.drawImage(img, 0, 0);
        };
        canvas.onmousemove = async function (e) {
            if (!base64) return;
            const rect = canvas.getBoundingClientRect();
            const x = Math.floor(e.clientX - rect.left);
            const y = Math.floor(e.clientY - rect.top);
            // 颜色预览
            const color = await window.api.eyedropper.getColor(base64, x, y);
            colorPreview.style.display = 'flex';
            colorPreview.style.background = color;
            colorPreview.textContent = color;
            // 放大镜
            const sx = x - Math.floor(MAG_SIZE / 2);
            const sy = y - Math.floor(MAG_SIZE / 2);
            magnifierCtx.clearRect(0, 0, magnifier.width, magnifier.height);
            magnifierCtx.imageSmoothingEnabled = false;
            magnifierCtx.drawImage(
                canvas,
                sx, sy, MAG_SIZE, MAG_SIZE,
                0, 0, MAG_SIZE * MAG_PIXEL, MAG_SIZE * MAG_PIXEL
            );
            // 十字线
            magnifierCtx.strokeStyle = '#f00';
            magnifierCtx.lineWidth = 2;
            magnifierCtx.beginPath();
            magnifierCtx.moveTo((MAG_SIZE / 2) * MAG_PIXEL, 0);
            magnifierCtx.lineTo((MAG_SIZE / 2) * MAG_PIXEL, MAG_SIZE * MAG_PIXEL);
            magnifierCtx.moveTo(0, (MAG_SIZE / 2) * MAG_PIXEL);
            magnifierCtx.lineTo(MAG_SIZE * MAG_PIXEL, (MAG_SIZE / 2) * MAG_PIXEL);
            magnifierCtx.stroke();
            // 放大镜位置：鼠标下方偏移
            magnifier.style.display = 'block';
            let magX = e.clientX - MAG_SIZE * MAG_PIXEL / 2;
            let magY = e.clientY + 24;
            // 防止超出窗口
            if (magX < 0) magX = 0;
            if (magX + magnifier.width > window.innerWidth) magX = window.innerWidth - magnifier.width;
            if (magY + magnifier.height > window.innerHeight) magY = e.clientY - 24 - magnifier.height;
            magnifier.style.left = magX + 'px';
            magnifier.style.top = magY + 'px';
        };
        canvas.onmouseleave = function () {
            colorPreview.style.display = 'none';
            magnifier.style.display = 'none';
        };
        canvas.onclick = async function (e) {
            if (!base64) return;
            const rect = canvas.getBoundingClientRect();
            const x = Math.floor(e.clientX - rect.left);
            const y = Math.floor(e.clientY - rect.top);
            const color = await window.api.eyedropper.getColor(base64, x, y);
            if (window.electron && window.electron.clipboard) {
                window.electron.clipboard.writeText(color);
            } else if (navigator.clipboard) {
                await navigator.clipboard.writeText(color);
            }
            alert('颜色 ' + color + ' 已复制到剪贴板');
            ipcRenderer.invoke('eyedropper-close-window');
        };
    </script>
</body>

</html>